<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">腾飞健康</div>
        <ul class="layui-nav layui-layout-left">
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" name="goBackIndex">返回首页</a></li>
        </ul>
    </div>
    <div style="float:left; width:48%; height: 400px; margin-top: 20px; background: whitesmoke;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="telephone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="userIdentity" lay-verify="required|identity" autocomplete="off"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">婚姻状况</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="maritalStatus" value="true" title="已婚" checked>
                        <input type="radio" name="maritalStatus" value="false" title="未婚">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">套餐选择</label>
                <div class="layui-input-block">
                    <select name="examinePackage" lay-filter="examinePackage" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
            </div>

            <!--<div class="layui-form-item">
                <label class="layui-form-label">项目增补</label>
                <div class="layui-input-block">
                    <input type="text" name="price" autocomplete="off"  class="layui-input"
                           lay-verify="required">
                </div>
            </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">日期选择</label>
                <div class="layui-input-block">
                    <input type="text" name="examineDate" id="examineDate" autocomplete="off" class="layui-input"
                           lay-verify="required" placeholder="请选择体检日期">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitUser">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div style="float:right; width:50%; height: 400px; margin-top: 20px; background: whitesmoke;">
        <div class="layui-row">
            <div class="layui-input-inline layui-col-sm5">
                <input class="layui-input " placeholder="用户ID..." autocomplete="off" name="searchUserInput"
                       id="searchUserInput"
                       maxlength="18">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" lay-filter="search" id="search">搜索挂号用户</button><button class="layui-btn" id="bookedUser">预约用户</button>
            </div>
            <!--数据表格-->
            <table class="layui-hide" id="registeUserList" lay-filter="tableFilter"></table>
        </div>
    </div>
</div>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    //页面加载即全屏
    window.onload = function () {
        //如何模拟f11的功能？？？
    }
    layui.use(["element", "jquery", "layer", "form", "laydate", "table"], function () {
        let element = layui.element;
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;
        let table = layui.table;

        //“体检日期”渲染
        laydate.render({
            elem: "#examineDate",
        });

        //挂号人员表格渲染
        let registeUserTable = table.render({
            elem: "#registeUserList",
            id: "registeUserTableId",
            url: "/getRegisteUserList",
            limit: 5,
            limits: [5, 10, 15],
            page: true,
            toolbar: false,
            size: "sm",
            method: "post",
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize"
            },
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg"
            },
            cols: [
                [
                    {field: "id", title: "id", width: 50, align: "center", hide: true},
                    {field: "userIdentity", title: "身份证号", width: 160, align: "center"},
                    {field: "userName", title: "姓名", width: 100, align: "center"},
                    {field: "examinePackageName", title: "套餐", width: 100, align: "center"},
                    {field: "examineDate", title: "日期", sort: true, width: 95, align: "center"},
                    {field: "examinerName", title: "挂号员", width: 90, align: "center"},
                    {title: "操作", align: "center", templet: "#operationTple"}
                ]
            ],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        $("#search").on("click", function (data) {
            let searchUserInput = $("#searchUserInput");
            table.reload("registeUserTableId", {
                page: {
                    curr: 1
                },
                where: {
                    searchUserInput: searchUserInput.val()
                },
                url: "/fuzzySearchRegisteUserById",
                method: "get",
            });
        });

        //提交挂号数据
        form.on("submit(submitUser)", function (data) {
            console.log(data.field);
            var userIdentity = data.field.userIdentity;
            $.ajax({
                url: "/hospitalSubmitUserMsg",
                dataType: "json",
                type: "post",
                async: true,
                data: data.field,
                success: function (responseResult) {
                    if (responseResult.code == 1) {
                        let msg=(responseResult.msg).split("@")[1];
                        layer.open({
                            type: 1,
                            title: false,//不显示标题栏
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'LAY_layuipro', //设定一个id，防止重复弹出
                            btn: ['确认付款'],
                            btnAlign: 'c',
                            moveType: 1, //拖拽模式，0或者1
                            content: '<div style="padding: 20px;padding-top: 30px; line-height: 22px; background-color: gray; color: #fff; font-weight: 300; height: 160px; width: 260px; text-align: center">' +
                                '<img src="images/regiv.GIF" width="100px" height="100px" style="padding-right: 10px"/>' +
                                '<img src="images/regiz.GIF" width="100px" height="100px"/>' +
                                '</br><div style="text-align:center; padding-top: 20px">请付款！</div></div>',
                            yes: function (index, layero) {
                                console.log("付款成功！");
                                layer.close(index);
                                $.ajax({
                                    url: "/getUserQRcode",
                                    dataType: "json",
                                    type: "post",
                                    data: "userIdentity=" + userIdentity+"&"+msg,
                                    async: true,
                                    success: function (resposneResult2) {
                                        console.log(resposneResult2.msg);
                                        layer.open({
                                            type: 1,
                                            title: false,//不显示标题栏
                                            closeBtn: false,
                                            area: '300px;',
                                            shade: 0.8,
                                            id: 'LAY_layuipro', //设定一个id，防止重复弹出
                                            btn: ['确定'],
                                            btnAlign: 'c',
                                            moveType: 1, //拖拽模式，0或者1
                                            content: '<div style="padding: 20px;padding-top: 30px; line-height: 22px; background-color: gray; color: #fff; font-weight: 300; height: 160px; width: 260px; text-align: center">' +
                                                '</br><div style="text-align:center; padding-top: 20px">体检编号已发送！</div></div>',
                                            yes: function (index, layero) {
                                                layer.close(index);
                                                registeUserTable.reload();
                                            }
                                        });
                                    },
                                    error: function () {
                                        console.log("体检编号产生请求失败！")
                                    }
                                });
                            }
                        });
                    } else {
                        layer.open({
                            type: 1,
                            title: false,//不显示标题栏
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'LAY_layuipro', //设定一个id，防止重复弹出,
                            btn: '关闭',
                            btnAlign: 'c',
                            moveType: 1, //拖拽模式，0或者1
                            content: '<div style="padding: 50px; line-height: 22px; background-color: gray; color: #fff; font-weight: 300;">您的上次挂号还未检查完毕，不能重复挂号！</div>',
                            yes: function (index, layero) {
                                layer.close(index);
                            }
                        });
                    }
                },
                error: function () {
                    console.log("挂号请求失败！");
                    layer.open({
                        type: 1,
                        title: false,//不显示标题栏
                        closeBtn: false,
                        area: '300px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['关闭'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: '<div style="padding: 50px; line-height: 22px; background-color: gray; color: #fff; font-weight: 300;">挂号请求失败！</div>',
                        yes: function () {
                            layer.close();
                        }
                    });
                }
            });
            return false;
        });

        //返回首页index.html
        $("a[name=goBackIndex]").on("click", function () {
            window.open("/unitIndex", "_top");
        });

        //获取身份证号性别代码
        function getSex() {
            let identity = $("input[name=userIdentity]").val();
            //存放性别代码
            let sex;
            let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (reg.test(identity) == true) {
                sex = identity.substring(16, 17);
                console.log("为真：" + sex);
                return sex;
            } else {
                console.log("为假：");
                return null;
            }
        }

        //根据性别获取该范围内的套餐列表
        function getPackageList(sexNumber) {
            console.log("sexNumber:" + sexNumber);
            if (sexNumber != null) {
                $.ajax({
                    url: "/getUnitPackageListBySex",
                    dataType: "json",
                    type: "post",
                    async: true,
                    data: "sex=" + sexNumber,
                    success: function (responseData) {
                        console.log(responseData);
                        $("select[name=examinePackage]").html("").append("<option value=''></option>");
                        for (let i = 0; i < responseData.length; i++) {
                            $("select[name=examinePackage]").append("<option value=" + responseData[i].examinePackageId + ">" + responseData[i].packageName + "</option>");
                        }
                        form.render("select");
                    },
                    error: function () {
                        console.log("套餐列表请求失败！");
                    }
                });
            } else {
                $("select[name=examinePackage]").html("").append("<option value=''></option>");
                form.render("select");
            }
        }

        //监控‘身份证号’栏的值，当光标离开时完成一次体检套餐下拉框的渲染
        function renderPakcageList() {
            $("input[name=userIdentity]").change(function () {
                let sexNumber = getSex();
                console.log("获取列表");
                getPackageList(sexNumber);
            });
        }

        renderPakcageList();

        $("#bookedUser").on("click", function(){
            table.reload("registeUserTableId", {
                page: {
                    curr: 1
                },
                url: "/getBookedUser",
                method: "get",
            });
        })

    });
</script>
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-default layui-btn-xs" lay-event="show"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del"
              style="padding-right: 5px;margin-right: 5px">填写信息</span>
    </div>
</script>
</body>
</html>